<template>
<view>
	<image class="banner" :src="imgUrl+banner"></image>
	<view class="page-section-spacing">
		<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
			<view v-for="(item,index) in cate" :key="index" @click="clickCate(item.id,index)" 
			class="scroll-view-item_H" :class="{checktrue : key == index }">{{item.name}}</view>
		</scroll-view>
	</view>
	<view class="content">
		<view class="list" v-for="(item,index) in list" :key="index" @click="jump(item.id)">
			<image class="item_img" :src="imgUrl+item.img"></image>
			<view v-if="item.id == 24" class="price">积分:{{item.price}}</view><!--积分兑换红包-->
			<view v-else class="price">价格:{{item.price}}</view>
			<view>{{item.name}}</view>
		</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			imgUrl:this.url,
			banner:'',
			page:1,
			pageShow:true,
			list:[],
			cate:[],
			cateId:0,
			index:0.,
			key:0
		}
	},
	onLoad:function(){
		uni.showLoading({  
		    title: '加载中'  
		});
		this.getBanner()
		this.getCate()
		this.getList()
	},
	methods: {
		getBanner:function(){
			var that = this;
			var data = {type:2}
			request({
				url: 'banner',
				method: 'get',
				data:data,
				success: (res) => {
					that.banner = res.data.data[0].img
				}
			})
		},
		getCate:function(){
			var that = this;
			var data = {role:uni.getStorageSync('role')}
			//var data = {role:2}
			request({
				url: 'score/cate',
				method: 'get',
				data:data,
				success: (res) => {
					this.cate = res.data.data
					this.cateId = res.data.data[0]['id']
					that.getList();
				}
			})
		},
		onReachBottom: function(){
			if(this.pageShow){
				 //当前不是最后一页可加载
				 this.page = this.page + 1
				 uni.showLoading({
				     title: '加载中'  
				 });
				 this.getList();
			}
		},
		getList:function(){
			var that = this;
			var data = {
				cateId:this.cateId,
				page:this.page
			}
			request({
				url: 'score/goods',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					if(res.data.code == 1){
						if(res.data.data.last_page <= that.page){
							that.pageShow = false
						}
						if(that.page == 1){
							that.list = res.data.data.data
						}else{
							var list = that.list
							that.list = list.concat(res.data.data.data)
						}
					}
				}
			})
		},
		clickCate:function(id,index){
			this.key = index
			this.cateId = id
			this.page = 1
			this.pageShow = true
			uni.showLoading({
			    title: '加载中'  
			});
			this.getList()
		},
		jump:function(id){
			uni.navigateTo({
				url:'./info?id='+id
			});
		}
	}
}
</script>
<style>
.banner {
	width: 100%;
	height:240rpx;
}
.page-section-spacing{
    margin-top: 20rpx;
    width:100%;
}
.scroll-view_H{
    white-space: nowrap;
    border-bottom: 1px solid #c0c0c0;
} 
.scroll-view-item{
    height: 300rpx;
}
.scroll-view-item_H{
    display: inline-block;
    width: 25%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    border-right: 1px solid #c0c0c0;
}
.scroll-view_H :nth-child(1){
    border-left:none;
}
.checktrue{border-bottom: 2px solid #e60000;}
.content{
	width:100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.list{
	width:50%;
	text-align: center;
	padding-top:15rpx;
}
.item_img{
	width:90%;
	height:200rpx;
}
.price{
	color:#e60000;
	font-size:15px;
	margin-top:10rpx;
	margin-bottom: 10rpx;
}
</style>